
<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">北京</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper" v-for="item of hot" :key="item.id">
                        <div class="button">{{ item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="area" 
                v-for="(item,index) of cities"
                :key="index"
                :ref="index"
            >
                <div class="title border-topbottom" >
                    {{ index }}          
                </div>
                <div class="item-list" v-for="i of item" :key="i.id">
                    <div class="item border-bottom">{{ i.name }}</div>
                </div>
            </div>
                         
        </div>
        
    </div>
</template>

<script>
    
import Bscroll from 'better-scroll'
    export default {
        name:"List",
        props:{
            cities:Object,
            hot: Array,
            letter:String
        },
        data(){
            return {

            }
        },
        mounted () {
            this.scroll = new Bscroll(this.$refs.wrapper)
        },
        watch:{
            //监听传递过来的数据--字符A-Z
            letter(){
                if(this.letter){
                    // console.log(this.letter)
                    //通过给citis加了ref获取它的dom元素--通过$refs获取元素
                    // console.log(this.$refs[this.letter][0])
                    const ele = this.$refs[this.letter][0]
                    //找到的区域滚到到顶部
                    this.scroll.scrollToElement(ele)
                }
            }
        }
  
    }
</script>

<style lang="stylus" scoped>
@import "../../assets/styles/varibles.styl"
.border-topbottom
	&:before
		border-color: #ccc
	&:after
		border-color: #ccc
.border-bottom
	&:before
		border-color: #ccc

.list
	overflow: hidden
	position: absolute
	top: 1.58rem
	left: 0
	right: 0
	bottom: 0 
	// background:red
	.title
		line-height: .54rem
		background: #eee
		padding-left: .2rem
		color: #666
		font-size: .26rem
	.button-list
		overflow: hidden
		padding: .1rem .6rem .1rem .1rem
		.button-wrapper
			float: left
			width: 33.33%
			.button
				margin: .1rem
				padding: .1rem 0
				text-align: center
				border: .02rem solid #ccc
				border-radius: .06rem
	.item-list
		.item
			line-height: .76rem
			padding-left: .2rem
</style>